<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="color-scheme" content="light dark">
    <title>Vimium Commands</title>
    <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" />
    <link rel="stylesheet" type="text/css" href="key_mappings.css" />
    <link rel="stylesheet" type="text/css" href="command_listing.css" />

    <script src="command_listing.js" type="module"></script>
  </head>

  <body class="vimium-body">
    <header>
      Vimium Commands
      <a id="github-link" href="https://www.github.com/philc/vimium">
        <img id="github" src="../github.svg">
      </a>
    </header>
    <nav>
      <ul>
        <li><a href="#navigation">Navigating the page</a></li>
        <li><a href="#find">Using find</a></li>
        <li><a href="#history">Navigating history</a></li>
        <li><a href="#tabs">Manipulating tabs</a></li>
        <li><a href="#misc">Miscellaneous</a></li>
      </ul>
    </nav>

    <main>
      <h2 id="navigation" data-group="navigation">Navigating the page</h2>
      <h2 id="vomnibar" data-group="vomnibar">Using the vomnibar</h2>
      <h2 id="find" data-group="find">Using find</h2>
      <h2 id="history" data-group="history">Navigating history</h2>
      <h2 id="tabs" data-group="tabs">Manipulating tabs</h2>
      <h2 id="misc" data-group="misc">Miscellaneous</h2>
    </main>

    <template id="command">
      <div class="command" id="example-command-name">
        <h3>
          <code>an-example-command</code>
          <span class="key-bindings"></span>
        </h3>
        <p class="desc">Example description.</p>
        <p class="details"></p>
        <div class="options">
          <p><strong>Options</strong></p>
          <ul></ul>
        </div>
      </div>
    </template>

    <template id="keys">
      <div class="key-block">
        <span class="key"></span><span class="comma">,</span>
      </div>
    </template>
  </body>
</html>
